<template>
  <div class="view-fill">
    <div v-show="!modifyInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="订单明细"
        :btn-list="fullInfo.btnList"
      >
        <template v-slot:full-button>
          <el-button
            v-if="
              (infoList.data.status === 1 || infoList.data.status === 2) &&
              !infoList.data.deliverFlag
            "
            @click="creatDeliver"
            >生成发货单</el-button
          >
          <el-button v-if="infoList.data.status === 1" @click="update"
            >修改</el-button
          >
        </template>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList"> </basic-information>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('detailInfo') }}</p>
          </div>
          <div class="model-panel-body">
            <TableContainer
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :pager="false"
              :summary="true"
              :check-box="false"
              :summary-field-list="tableInfo.summaryFieldList"
              :tab-index="true"
              :query="filterInfo.query"
              :field-list="tableInfo.fieldList"
            >
            </TableContainer>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :pend-saleorder-id="modifyInfo.pendSaleorderId"
      :sale-order-id="modifyInfo.saleOrderId"
      :purch-type="modifyInfo.purchType"
      @returnModify="getList"
    />
  </div>
</template>
<script setup name="saleOrderDetail">
import BasicInformation from '@/components/BasicInformation/index'
import TableContainer from '@/components/TableContainer/index'

import modify from './deviceModify'
import { getSaleOrderById, saleDetailBySaleId } from '@/api/supplier.js'

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [Number, String],
  },
})

const systemConfig = ref(proxy.$store.state.permission.systemConfig)
const fullInfo = reactive({
  btnList: [],
})
const infoList = reactive({
  data: {},
  fieldList: [
    { label: '销售单号', value: 'orderNo', type: 'text' },
    { label: '采购单号', value: 'purchNo', type: 'text' },
    { label: '状态', value: 'statusValue', type: 'text' },
    { label: '销售类型', value: 'saleProductTypeValue', type: 'text' },
    { label: '客户', value: 'hospitalName', type: 'text' },
    { label: '客户部门', value: 'deptName', type: 'text' },
    { label: '联系人', value: 'receiveContacts', type: 'text' },
    { label: '联系电话', value: 'receivePhone', type: 'text' },
    { label: '收货地址', value: 'receiveAddressValue', type: 'text' },
    { label: '创建人', value: 'createUserName', type: 'text' },
    { label: '创建时间', value: 'createTime', type: 'text' },
    { label: '备注', value: 'remark', type: 'popover' },
  ],
})
// 过滤相关配置
const filterInfo = reactive({
  query: {
    orderId: props.id,
  },
})
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  summaryFieldList: [
    { value: 'qty' },
    { value: 'purchQty' },
    { value: 'refuseQty' },
    { value: 'deliverQty' },
    { value: 'sumAmount', formatter: proxy.$fn.TripartiteMethodAsset },
  ],
  data: [],
  fieldList: [
    {
      label: '设备名称',
      value: 'commonName',
    },
    {
      label: '设备编码',
      value: 'productCode',
    },
    {
      label: '设备规格',
      value: 'standard',
    },
    {
      label: '设备品牌',
      value: 'trademark',
    },
    {
      label: '厂家名称',
      value: 'brandName',
    },
    {
      label: '单价',
      value: 'price',
      type: 'column',
      formatter: proxy.$fn.TripartiteMethodAsset,
    },
    {
      label: '采购数量',
      value: 'purchQty',
      type: 'column',
    },
    {
      label: '销售数量',
      value: 'qty',
      type: 'column',
    },
    {
      label: '拒绝数量',
      value: 'refuseQty',
      type: 'column',
    },
    {
      label: '已发数量',
      value: 'deliverQty',
      type: 'column',
    },
    {
      label: '拒收数量',
      value: 'receiveRefuseQty',
      type: 'column',
    },
    {
      label: '总金额',
      value: 'sumAmount',
      type: 'column',
      formatter: proxy.$fn.TripartiteMethodAsset,
    },
  ],
})
const modifyInfo = reactive({
  visible: false,
  pendSaleorderId: '',
  saleOrderId: '',
  purchType: '',
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  if (props.id) {
    getList()
    getMain()
  }
})

function update() {
  modifyInfo.visible = true
  modifyInfo.pendSaleorderId = ''
  modifyInfo.purchType = infoList.data.purchType
  modifyInfo.saleOrderId = infoList.data.id
}
function creatDeliver() {
  proxy.$router.push({
    name: 'deliverOrder',
    params: infoList.data,
  })
}
function getMain() {
  getSaleOrderById(props.id).then((res) => {
    if (res && res.success) {
      infoList.data = res.data
    }
  })
}
function getList() {
  saleDetailBySaleId({ orderId: props.id }).then((res) => {
    if (res && res.success) {
      tableInfo.data = res.data
    }
  })
}
function printSale() {}
function exportExcelSale() {}
</script>
